<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>千锋健康</title>
    <meta content="千锋健康" name="description">
    <meta content="千锋健康" name="keywords">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link href="../css/style.css" rel="stylesheet">
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析<small>套餐占比</small></h1>
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>套餐占比</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>
    <br/>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart2" style="height:600px;"></div>
        </div>
    </div>
    <br/>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart3" style="height:600px;"></div>
        </div>
    </div>
    <br/>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart4" style="height:600px;"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例


    let vm = new Vue(
        {
            el:"#app",
            data:{
                option1:{
                    title: {
                        text: '套餐占比预览'
                    },
                    tooltip: {},
                    legend: {
                        data: ['套餐预约数']
                    },
                    xAxis: {
                        axisLabel:{
                            interval: 0,
                            rotate:20
                        },
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '套餐预约数',
                        type: 'bar',
                        data: []
                    }]
                },
                option2:{
                    title: {
                        text: '套餐占比饼状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['套餐预约数']
                    },
                    series : [
                        {
                            name: '各个套餐占比',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data:[]        // 数据数组，name 为数据项名称，value 为数据项值
                        }
                    ]
                },
                option3:{
                    title: {
                        text: '历史套餐预览'
                    },
                    tooltip: {},
                    legend: {
                        data: ['历史套餐预约数']
                    },
                    xAxis: {
                        axisLabel:{
                            interval: 0,
                            rotate:20
                        },
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '历史套餐预约数',
                        type: 'bar',
                        data: []
                    }]
                },
                option4:{
                    title: {
                        text: '历史套餐占比饼状图'
                    },
                    tooltip: {},
                    legend: {
                        data: ['历史套餐预约数']
                    },
                    series : [
                        {
                            name: '历史各个套餐占比',
                            type: 'pie',    // 设置图表类型为饼图
                            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data:[]        // 数据数组，name 为数据项名称，value 为数据项值
                        }
                    ]
                },
            },
            method:{},
            created(){
                axios({
                    url: "http://localhost:8080/setmeal/getReport",
                    method: "get",
                    headers: {
                        token: localStorage.getItem("security_token")
                    }
                }).then((result) => {
                    let code = result.data.code;
                    if(code==200) {
                        //柱状图的显示
                        let list = result.data.data;
                        for (let i = 0; i < list.length; i++) {
                            this.option1.xAxis.data.push(list[i].name);
                            this.option1.series[0].data.push(list[i].setmealcount);
                        }
                        let myChart1 = echarts.init(document.getElementById('chart1'));
                        myChart1.setOption(this.option1);

                        //饼状图显示
                        let sum = 0;
                        for (let i = 0; i < list.length; i++) {
                            sum += list[i].setmealcount;
                        }

                        for (let i = 0; i < list.length; i++) {
                            // this.option2.xAxis.data.push(list[i].name);
                            let count = list[i].setmealcount;
                            // let str = (count/sum);//可以走了 必须为数字格式
                            let str = ((count/sum)*100).toFixed(2) + "%";
                            this.option2.series[0].data.push({value:list[i].setmealcount,name:list[i].name+"->"+str});
                        }
                        let myChart2 = echarts.init(document.getElementById('chart2'));
                        myChart2.setOption(this.option2);
                    }else if(code == 401 || code == 504 || code ==505){
                        alert(result.data.message);
                        location.href="../login.html"
                    }else if(result.data.code == 403) {
                        this.$message.error(result.data.message);
                        location.href = "show.html";
                    }
                });

                axios({
                    url: "http://localhost:8080/setmeal/getAllReport",
                    method: "get",
                    headers: {
                        token: localStorage.getItem("security_token")
                    }
                }).then((result) => {
                    let code = result.data.code;
                    if(code==200) {
                        //柱状图的显示
                        let list = result.data.data;
                        for (let i = 0; i < list.length; i++) {
                            this.option3.xAxis.data.push(list[i].name);
                            this.option3.series[0].data.push(list[i].setmealcount);
                        }
                        let myChart3 = echarts.init(document.getElementById('chart3'));
                        myChart3.setOption(this.option3);

                        //饼状图显示
                        let sum = 0;
                        for (let i = 0; i < list.length; i++) {
                            sum += list[i].setmealcount;
                        }

                        for (let i = 0; i < list.length; i++) {
                            // this.option2.xAxis.data.push(list[i].name);
                            let count = list[i].setmealcount;
                            // let str = (count/sum);//可以走了 必须为数字格式
                            let str = ((count/sum)*100).toFixed(2) + "%";
                            this.option4.series[0].data.push({value:list[i].setmealcount,name:list[i].name+"->"+str});
                        }
                        let myChart4 = echarts.init(document.getElementById('chart4'));
                        myChart4.setOption(this.option4);
                    }else if(code == 401 || code == 504 || code ==505){
                        alert(result.data.message);
                        location.href="../login.html"
                    }else if(result.data.code == 403) {
                        this.$message.error(result.data.message);
                        location.href = "show.html";
                    }
                })
            }
        }
    );

</script>
</html>
